<template>
	<ul>
		<li v-for="(item,index) in menuList" :key='item.url' @click.stop="changeTab(item,index)" :class="{current:menuActive == index,teaWidth:userType == 1}">{{item.name}}</li>
	</ul>
</template>
<script>
	import utils from '@/assets/js/utils';
	export default {
		data() {
			return {
				menuList: [],
				subMenuList:[
					{name:"我的作品",url:"/my-work"},
					{name:"我的收藏",url:"/my-collect"},
					{name:"我的积分",url:"/my-integral"}
				],
				teacherlist:[
					{name:"我的学生",url:"/my-student"},
					{name:"学生作品",url:"/student-work"}
				],
				userType:2,
				menuActive:0
			};
		},
		
		methods: {
			changeTab(item,index){
			    this.menuActive = index;
				this.$router.push({
					path:item.url
				})
			}
		},
		
		watch:{
			$route:{
				handler:function(newV,oldV){
					const path = newV.path;
					this.userType = utils.getSession('userType');
					if(this.userType == 1){//老师
						this.menuList = this.subMenuList.concat(this.teacherlist);
					}
					else{
						this.menuList = [...this.subMenuList];
					}
					if(this.menuList?.length){
						this.menuActive = this.menuList.findIndex(ele => ele.url == path);
						if(path == "/student-work-detail"){
							this.menuActive = 4;
						}
					}
				},
				deep:true,
				immediate:true
			}
		}
	};
</script>
<style lang="scss" scoped>
	ul{
		@include flex-row;
		justify-content: flex-end;
		flex: 1;
		li{
			@include cursor-style;
			width: 22%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background: #FFF1DF;
			border-radius: 5px 5px 5px 5px;
			font-size: 16px;
			color: #FF8A00;
		}
		li:not(:last-child){
			margin-right: 10px;
		}
		.current{
			background: #FF8A00;
			color: #FFFFFF;
		}
		.teaWidth{
			width: 18%;
		}
	}
	
</style>